<template>
	<view :class="referralsKey=='newFoods' ? 'pages_referralsItem pages_referralsItemFist' : 'pages_referralsItem'">
		<view class="pages_referralsItemHeard">
			<view class="pages_referralsItemHeardLeft">
				<image
					:src="referralsKey=='mainFoods' ? '/static/img/referrals002.png' :  '/static/img/referrals001.png'">
				</image>
				<view>
					{{referralsKey=='newFoods' ? '本月推荐上新菜品' : referralsKey=='mainFoods' ? '本月重点升级菜品' : referralsKey=='followIngredients' ? '本月重点关注食材' : ''}}
				</view>
				<view style="margin-left: 8rpx;" @click.stop="showNotice(referralsKey)">
					<u-icon name="question-circle" color="#999999" size="16"></u-icon>
				</view>
			</view>
			<view class="pages_referralsItemHeardRight">
				<span>查看详细数据</span>
				<image src="/static/img/rightIcon.png"></image>
			</view>
		</view>
		<!-- 		<ul class="pages_referralsItemMain" v-if="referralsKey=='newFoods'">
			<li v-for="(item,index) in referralsItem.foodList" :key="index">
				<view class="pages_referralsItemMainItems" @click="toSkip" :style="{border: referralsKey=='mainFoods'? '2rpx solid #3B77FF' : '2rpx solid #FFDA2D'}">
					<view :class="'pages_referralsItemMainItemsTop'">
						<view class="pages_referralsItemMainItemsTop_name">{{item.foodName}}</view>
						<view :class="'pages_referralsItemMainItemsTop_ratio'">
							<span :class="item.trend=='上升' ? '' : 'green'">{{item.marketIndex}}</span>
						</view>
					</view>
					<span class="pages_myReferralsItemMainItemsTop">
						<view class="pages_myReferralsItemMainItemsTopBox"  v-if="item.increaseIndex">
							<span :class="item.trend=='上升' ? '' : 'green'">{{item.increaseIndex}}%</span>
							<image v-if="item.trend!=3"
								:src="item.trend=='上升' ? '/static/img/UpIcon.png' : '/static/img/downIcon.png'"></image>
						</view>
						<view class="pages_myReferralsItemMainItemsTopBox buld"  v-else>
							暂无涨幅
						</view>
					</span>
					
					<view class="pages_referralsItemMainItemsBottom" v-if="referralsItem.foodList[0].foodIndexList">
						<view class="pages_referralsItemMainItemsBottom_heard" :style="{background: '#fffced'}" >
								<qiun-data-charts class="maincharts" type="area" :opts="newOpts" :chartData="newChartData"
									:canvas2d="true" :canvasId="`${referralsKey}${index}`" :cWidth="88" :cHeight="50" />
						</view>
						<view class="pages_referralsItemMainItemsBottom_end" :style="{background:'#fff3bb'}">
							<p>近半年</p>
							<p>指数涨幅情况</p>
						</view>
					</view>
				</view>
			</li>
		</ul> -->
		<view v-if="referralsItem.foodList">
			<view v-for="(item,index) in referralsItem.foodList" :key="index">

				<view v-if="index==0" class="pages_referralsItemMain pages_referralsItemMainFood"
					:style="{background: referralsKey=='mainFoods'? '#f8faff' : '#fffef6' ,border: referralsKey=='mainFoods'? '2rpx solid #3B77FF' : '2rpx solid #FFDA2D'}">
					<view class="pages_referralsItemMainFoodTop">
						<view :class="'pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsfoodName'">
							{{referralsKey=='followIngredients'? '食材' : '菜品'}}名称
						</view>
						<view :class="'pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsSp'">
							{{referralsKey=='followIngredients'? '食材' : '菜品'}}指数
						</view>
						<view class="pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsssx">
							{{referralsKey=='followIngredients'? '食材' : '菜品'}}趋势
						</view>
					</view>
					<view class="pages_referralsItemMainFoodBotton">
						<view v-if="referralsKey=='followIngredients'"
							:class="item.trend=='上升' ? 'pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsfoodName' : 'pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsfoodName green'">
							{{item.foodName | ff_foodNameTure}}
						</view>
						<view v-else
							:class="item.trend=='上升' ? 'pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsfoodName' : 'pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsfoodName green'">
							{{item.foodName}}
						</view>
						<view
							:class="item.trend=='上升' ? 'pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsSp' : 'pages_referralsItemMainTwoItemsSp pages_referralsItemMainTwoItems green'">
							{{item.marketIndex.toFixed(2)}}
						</view>
						<view class="pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsPP">
							<view class="pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsss"
								v-if="item.increaseIndex"
								:style="{background: referralsKey=='mainFoods'?  '#e6eeff' : '#fff5bd' }">
								<view class="mypages_referralsItemMainTwoItemsss">
									<span
										:class="item.trend=='上升' ? '' : 'green'">{{item.increaseIndex.toFixed(2)}}%</span>
									<image
										:src="item.trend=='上升' ? '/static/img/UpIcon.png' : '/static/img/downIcon.png'">
									</image>
								</view>

							</view>

							<view class="pages_referralsItemMainTwoItems pages_referralsItemMainTwoItemsss buld" v-else
								:style="{background: referralsKey=='mainFoods'? '#e6eeff' : '#fff5bd' }">
								暂无涨幅
							</view>
						</view>

					</view>
				</view>
			</view>

		</view>



		<view v-if="referralsItem.foodList && referralsKey=='newFoods'" class="pages_reason"
			:style="{background : referralsKey=='mainFoods' ? '#f4f8ff' : '#fffbe6'}">
			<span class="pages_reasonTitle"
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">推荐理由：</span>
			考虑上新时重点关注
			<span
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">{{referralsItem.foodList | ff_foodName}}</span>，
			<span
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">{{referralsItem.month | ff_moth}}</span>
			月该产品热度较高，较上月平均热度增幅
			<span
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">{{referralsItem | ff_percent}}</span>
		</view>
		<view v-else-if="referralsItem.foodList && referralsKey=='mainFoods'" class="pages_reason"
			:style="{background : referralsKey=='mainFoods' ? '#f4f8ff' : '#fffbe6'}">
			<span class="pages_reasonTitle"
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">推荐理由：</span>
			建议打造产品时重点关注
			<span
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">{{referralsItem.foodList | ff_foodName}}</span>，
			<span
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">{{referralsItem.month | ff_moth}}</span>
			月该产品数据表现较好，热度较高，较上月平均热度增幅
			<span
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">{{referralsItem | ff_percent}}</span>
		</view>
		<view v-else-if="referralsItem.foodList && referralsKey=='followIngredients'" class="pages_reason"
			:style="{background : referralsKey=='mainFoods' ? '#f4f8ff' : '#fffbe6'}">
			<span class="pages_reasonTitle"
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">推荐理由：</span>
			本月请重点关注
			<span
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">{{referralsItem.foodList | ff_foodName}}</span>食材，由这些食材打造的菜品
			<span
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">{{referralsItem.month | ff_moth}}</span>
			月数据表现较好，热度较高，较上月平均热度增幅
			<span
				:style="{color : referralsKey=='mainFoods' ? '#3B77FF' : '#FF8940'}">{{referralsItem | ff_percent}}</span>
		</view>

		<view v-else class="pages_reasonKong"
			:style="{background: referralsKey=='mainFoods'? '#f8faff' : '#fffef6' ,border: referralsKey=='mainFoods'? '2rpx solid #3B77FF' : '2rpx solid #FFDA2D'}">
			即将上线 敬请期待
		</view>

		<noticeModal :show="isNoticeShow" :title="noticeInfo.title" :content="noticeInfo.content" confirmText="我知道了"
			@confirm="isNoticeShow=false" @close="isNoticeShow=false"></noticeModal>

	</view>
</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	import noticeModal from '@/components/noticeModal/index.vue';
	var uChartsInstance = {};
	export default {
		components: {
			noticeModal,
		},
		data() {
			return {
				cWidth: 0,
				cHeight: 0,
				cMainWidth: 0,
				cMainHeight: 0,
				chartData: {},
				followChartData: {},
				newChartData: {},
				followOpts: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#ffda2d", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [10, 0, 0, 0],
					fontSize: 13,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "bottom",
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					xAxis: {
						disableGrid: false,
						disabled: true,
						axisLine: false,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 13,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "justify",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "dash",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						format: ""
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: true,
						disableGrid: true,
						splitNumber: 5,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: []
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.8,
							addLine: true,
							width: 2,
							gradient: true
						},
						tooltip: {
							showBox: false,
							showArrow: false,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							fontColor: "#FFFFFF",
							splitLine: false,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				},

				//这里的 opts 是图表类型 type="area" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['area'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				newOpts: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#ffda2d", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [10, 0, 0, 0],
					fontSize: 13,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "bottom",
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					xAxis: {
						disableGrid: true,
						disabled: true,
						axisLine: false,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 13,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "justify",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "dash",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						format: ""
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: true,
						disableGrid: true,
						splitNumber: 5,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: []
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.8,
							addLine: true,
							width: 2,
							gradient: true
						},
						tooltip: {
							showBox: false,
							showArrow: false,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							fontColor: "#FFFFFF",
							splitLine: false,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				},

				//这里的 opts 是图表类型 type="area" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['area'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#3b77ff", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [10, 0, 0, 0],
					fontSize: 13,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "bottom",
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					xAxis: {
						disableGrid: false,
						disabled: true,
						axisLine: false,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 13,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "justify",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "dash",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						format: ""
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: true,
						disableGrid: true,
						splitNumber: 5,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: []
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.8,
							addLine: true,
							width: 2,
							gradient: true
						},
						tooltip: {
							showBox: false,
							showArrow: false,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							fontColor: "#FFFFFF",
							splitLine: false,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				},
				noticeData: {
					"newFoods": {
						name: '本月推荐上新菜品',
						title: '推荐上新菜品（菜品指数）',
						content: `<div><strong>菜品指数：</strong>调用OSD（章鱼小数据数据库）中小众网红菜品数据库，由菜品对应餐厅、菜品满意度、热度、推荐指数、供需关系等数据半年变化的算法、模型计算得出，分值0-100，分值越高，代表该产品表现和趋势越好。</div>
						<div style="margin-top: 8px;"><strong>小众网红产品：</strong>代表少量网红餐饮门店在供应，但是对应餐厅、菜品数量，满意度和热度等相关指数表现优秀，连续快速上升。</div>`,
					},
					"mainFoods": {
						name: '本月重点升级菜品',
						title: '重点升级菜品（菜品指数）',
						content: `<div><strong>菜品指数：</strong>调用OSD（章鱼小数据数据库）中大众网红菜品数据库，由菜品对应餐厅、菜品满意度、热度、推荐指数、供需关系等数据半年变化的算法、模型计算得出，分值0-100，分值越高，代表该产品表现和趋势越好。</div>
						<div style="margin-top: 8px;"><strong>大众网红产品：</strong>代表大量网红餐饮门店在供应，且对应餐厅、菜品数量，满意度和热度等相关指数表现不错，连续快速上升。</div>`,
					},
					"followIngredients": {
						name: '本月重点关注食材',
						title: '重点关注食材（食材指数）',
						content: `<div><strong>食材指数：</strong>调用OSD（章鱼小数据数据库）中大众网红食材数据库，由食材对应菜品、餐厅、食材满意度、热度、推荐指数、供需关系等数据半年变化的算法、模型计算得出，分值0-100，分值越高，代表该食材表现和趋势越好。</div>
						<div style="margin-top: 8px;"><strong>大众网红食材：</strong>代表大量网红餐饮门店在使用，且对应餐厅、菜品，满意度和热度等相关指数表现不错，连续快速上升。</div>`,
					},
				},
				// 提示弹窗展示
				isNoticeShow: false,
				// 提示弹窗信息
				noticeInfo: {
					title: '',
					content: '',
				}
			}
		},
		props: {
			referralsItem: {
				type: Object,
				default: {}
			},
			referralsIndex: {
				type: Number,
				default: 0
			},
			referralsKey: {
				type: String,
				default: ''
			},
		},
		filters: {
			ff_percent(item) {
				let zoNum = 0;
				let junNum = 0;

				if (!item.foodList) {
					return "0%"
				}
				item.foodList.forEach((nowItem, nowIndex) => {
					if (nowIndex == 0) {
						zoNum = zoNum + Number(nowItem.increaseIndex);
					}

				});
				junNum = zoNum / 1;
				return `${(junNum).toFixed(2)}%`
			},
			ff_foodName(item) {

				let foodName = [];
				item.forEach((item, index) => {
					if (index == 0) {
						foodName.push(item.foodName);
					}
				});

				let strName = foodName.join(',');
				console.log('ff_foodName', strName)
				return strName
			},
			ff_foodNameTure(item) {
				console.log()
				if (item.indexOf(',') != -1) {
					return item.split(',')[0]
				} else {
					return item
				}

			},
			ff_foodNameNum(item) {
				return 1
			},
			ff_moth(newDates) {
				return (new Date(newDates).getMonth() + 1);
			}
		},
		watch: {
			referralsItem: {
				handler(newVal) {
					console.log(newVal)
					this.$nextTick(() => {
						this.getServerData();
					})
				},
				immediate: true


			}
		},
		methods: {

			showNotice(key) {
				this.noticeInfo = this.noticeData[key]
				this.isNoticeShow = true
			},

			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					if (this.referralsKey == "newFoods") {
						if (this.referralsItem && this.referralsItem.foodList) {
							this.referralsItem.foodList.forEach((item, index) => {
								let itemIndex = `newFoods${index}`;

								var categories = [];
								var data = [];
								if (!item.foodIndexList) {
									return
								}
								item.foodIndexList.forEach(nowItem => {
									categories.push(nowItem.month);
									data.push(nowItem.marketIndex);
								})

								var res = {
									categories,
									series: [{
										name: "成交量A",
										data
									}]
								};

								this.newChartData = JSON.parse(JSON.stringify(res));
							})
						}
					}
					if (this.referralsKey == 'mainFoods') {
						if (this.referralsItem && this.referralsItem.foodList) {
							this.referralsItem.foodList.forEach((item, index) => {
								var mainCategories = [];
								var mainData = [];
								if (!item.foodIndexList) {
									return
								}

								item.foodIndexList.forEach(nowItem => {
									mainCategories.push(nowItem.month);
									mainData.push(nowItem.marketIndex);
								})


								var res = {
									categories: mainCategories,
									series: [{
										name: "成交量A",
										data: mainData
									}]
								};
								this.chartData = JSON.parse(JSON.stringify(res));
							})
						}


					}

					if (this.referralsKey == 'followIngredients') {

						if (this.referralsItem && this.referralsItem.foodList) {
							this.referralsItem.foodList.forEach((item, index) => {
								var FoodsCategories = [];
								var FoodsData = [];
								if (!item.foodIndexList) {
									return
								}

								item.foodIndexList.forEach(nowItem => {
									FoodsCategories.push(nowItem.month);
									FoodsData.push(nowItem.marketIndex);
								})



								var res = {
									categories: FoodsCategories,
									series: [{
										name: "成交量A",
										data: FoodsData
									}]
								};
								this.followChartData = JSON.parse(JSON.stringify(res));
							})
						}

					}

				}, 500);
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			},
			toSkip() {
				// uni.navigateTo({
				// 	url: '/package/intelligence/index'
				// })
			}

		}
	}
</script>

<style lang="scss" scoped>
	.pages_referralsItem {
		// border: 2rpx solid #FFDA2D;
		border-radius: 20rpx;
		margin-top: 24rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #fff;

		.green {
			color: #3AD346 !important;
		}

		.pages_referralsItemHeard {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		// <view class="pages_referralsItemHeardRight">
		// 				<span>查看详细数据</span>
		// 				<image class="pages_referralsItemHeardRight" src="/static/img/leftActionIcon.png"></image>
		// 			</view>
		.pages_referralsItemHeardRight {
			display: flex;
			align-items: center;

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #333333;
			}

			image {
				width: 24rpx;
				height: 24rpx;
			}

		}

		.pages_referralsItemHeardLeft {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				font-size: 28rpx;
				font-weight: bold;
				line-height: 40rpx;
				color: #333333;
				margin-left: 12rpx;

			}
		}

		.pages_referralsItemHeardRight {}

		.pages_referralsItemMainItemsBottom_heard {
			border-radius: 16rpx 16rpx 0 0;
			background: #fffbe6;
			overflow: hidden;
			height: 112rpx;

		}

		.charts {
			width: 176rpx;
			height: 100rpx;
			// transform: translateX(-40rpx);
		}

		.pages_referralsItemMainItemsBottom_end {
			padding: 8rpx;
			height: 72rpx;
			background: #fff3bb;
			border-radius: 0px 0px 16rpx 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			p {
				height: 28rpx;
				font-size: 20rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 28rpx;
				color: #999999;
			}
		}

		.pages_referralsItemMainFoodTop {
			display: flex;
			justify-content: space-between;
			margin-bottom: 6rpx;

			view {
				height: 32rpx;
				font-size: 22rpx !important;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #a5a397 !important;
			}
		}

		.pages_referralsItemMainFoodBotton {
			display: flex;
			justify-content: space-between;
		}

		.pages_referralsItemMain {
			margin: 32rpx 0 16rpx 0;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			text-align: center;
			color: #333333;

			li {
				width: 31%;
				flex: 0 0 31%;
				margin-right: 3%;
			}
		}

		.pages_referralsItemMainFood {
			justify-content: space-between;
			border-radius: 16rpx;
			padding: 16rpx;
			box-sizing: border-box;
		}

		.pages_referralsItemMainTwoItemsP {
			height: 42rpx;
			display: flex;

			image {
				width: 26rpx;
				height: 36rpx;
			}
		}

		.pages_referralsItemMainTwoItemsUpLiIcon-wiht {
			overflow: hidden;

			image {
				width: 192rpx;
				height: 68rpx;
			}

			#maincharts {
				width: 192rpx !important;
				height: 68rpx !important;
				// transform: translateX(-22rpx);
			}
		}

		.pages_referralsItemMainTwoItemsSp {
			font-size: 36rpx !important;
			font-family: DIN;
			font-weight: bold;
			color: #FF471C;
			width: 110rpx;
			flex: 0 0 110rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.pages_referralsItemMainTwoItemsPP {
			width: 120rpx;
			flex: 0 0 120rpx;
			display: flex;
			justify-content: flex-end;
		}



		.pages_referralsItemMainTwoItems {
			text-align: left;
			// display: flex;
			/* flex-direction: column; */
			// justify-content: center;
			// align-items: center;
			border-radius: 16rpx;

			box-sizing: border-box;
			font-size: 26rpx;
			font-weight: 550;
			text-align: center;
			color: #FF471C;

			image {
				display: inline-block;
				margin-left: 8rpx;
				width: 26rpx;
				height: 36rpx;
			}
		}

		.pages_referralsItemMainTwoItems:nth-child(1) {}

		.pages_referralsItemMainTwoItemsP {

			span {
				display: inline-block;
				height: 38rpx;
				font-size: 32rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 38rpx;
				color: #FF471C;
			}
		}

		.mypages_referralsItemMainTwoItemsss {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.pages_referralsItemMainTwoItemsss {
			display: flex;
			padding: 6rpx 10rpx;
		}

		.pages_referralsItemMainTwoItemsssx {
			flex: 0 0 120rpx;
			text-align: right;
		}

		.pages_referralsItemMainItems {
			width: 100%;
			border-radius: 16rpx;
			padding: 16rpx;
			box-sizing: border-box;
			background: #fffef6;
			text-align: left;
		}

		.pages_referralsItemMainItems:not(:last-child) {

			.pages_referralsItemMainItemsTop {
				position: relative;

				&::after {
					content: "";
					width: 1rpx;
					height: 48rpx;
					background-color: #FFDA2D;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: -6rpx;
				}
			}

			.bule {
				&::after {
					content: "";
					background-color: #76A0FF !important;
				}
			}
		}

		.pages_referralsItemMainItemsBottom {
			margin-top: 40rpx;
		}

		.pages_myReferralsItemMainItemsTop {
			height: 44rpx;
			display: inline-block;
			border-radius: 12rpx;
			padding: 4rpx 8rpx;
			background-color: #fff5bd;
			font-size: 26rpx;
			font-family: DIN;
			font-weight: bold;
			color: #FF471C;
			box-sizing: border-box;

			span {
				display: inline-block;
				height: 36rpx;
				line-height: 36rpx;
			}

			image {
				width: 26rpx;
				height: 36rpx;
				margin-left: 6rpx;
			}
		}

		.pages_myReferralsItemMainItemsTopBox {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.buld {
			color: #333;
		}


		.pages_referralsItemMainItemsTop_name {
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 40rpx;
			color: #333333;
			// margin-bottom: 8rpx;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
		}

		.pages_referralsItemMainItemsTop_ratio {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 8rpx;

			span {
				font-size: 32rpx;
				font-family: DIN;
				font-weight: bold;
				color: #FF471C;
			}


		}

		.pages_referralsItemMainItemsBottom_heard {
			image {
				width: 176rpx;
				height: 100rpx;
			}
		}

		.pages_reasonKong {
			width: 542rpx;
			height: 80rpx;
			line-height: 80rpx;
			box-sizing: border-box;
			opacity: 1;
			border-radius: 16rpx;
			text-align: center;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #a5a397 !important;
			margin-top: 32rpx;
		}

		.pages_reason {
			padding: 16rpx;
			width: 100%;
			box-sizing: border-box;
			border-radius: 16rpx;
			background: #fffbe6;
			color: #333;
			font-size: 12px;
			font-family: 蘋方-簡;
			font-weight: normal;

			.pages_reasonTitle {
				color: #FF8940;
			}
		}

		.pages_referralsItemMainTwoItemsfoodName {
			font-size: 30rpx !important;
			font-family: 蘋方-簡;
			font-weight: bold;
			color: #333333 !important;
			flex: 0 0 170rpx;
			width: 170rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			text-align: left !important;
		}
	}

	.pages_referralsItemFist {
		margin-top: 0rpx !important;
	}
</style>
